<template>
   <!-- 
      在vue中echarts编写规则
      1、在data中定义报表的数据
      2、在计算属性中编写options的echarts选项
      3、在mounted钩子函数中进行echarts的初始化
    -->
  <div style="width:350px;height:250px;border:1px solid #ccc;margin:10px" ref="main"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    data(){
        return{
            data:[
                {name:'加油',value:600},
                {name:'保险',value:400},
                {name:'保养',value:200},
                {name:'罚款',value:100},
            ]
        }
    },
    computed:{
        options(){
            return{
                tooltip:{
                    formatter:'{b}:{d}%'
                },
                legend:{
                     orient:'vertical',
                     bottom:0,
                     right:5,
                     icon:'circle'
                },
                series:{
                    type:'pie',
                    data:this.data,
                    radius:['50%','75%']
                }
            }
        }
    },
    mounted(){
        const mychart=echarts.init(this.$refs.main)
        mychart.setOption(this.options)
    }

}
</script>

<style>

</style>